@import './variable.scss';

// 字体设置
@mixin font($size: $font-size, $color: $font-color, $line-height: $line-height) {
    font-size: $size;
    color: $color;
    line-height: $line-height;
}

// 横向 flex 布局
@mixin flex($justify-content: center, $align-items: center) {
    display: flex;
    justify-content: $justify-content;
    align-items: $align-items;
}

// 纵向 flex 布局
@mixin flex-column($justify-content: center, $align-items: center) {
    @include flex($justify-content, $align-items);
    flex-direction: column;
}

// 通过 position 来居中
@mixin position-center($direction: 'both') {
    position: absolute;
    @if $direction == 'v' {
        top: 50%;
        transform: translateY(-50%);
    }
    @else if $direction == 'h' {
        left: 50%;
        transform: translateX(-50%);
    }
    @else {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

// 正方形
@mixin square($size) {
    width: $size;
    height: $size;
}

// 圆形
@mixin circle($size) {
    @include square($size);
    border-radius: 50%;
}

// 单行省略
@mixin ellipsis($width: auto) {
    max-width: $width;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}

// 多行省略
@mixin line-clamp($line) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $line;
    line-clamp: $line;
}

// 单向圆角
@mixin border-radius($direction, $value: 2px) {
    @if $direction == top or $direction == bottom {
        border-#{$direction}-left-radius: $value;
        border-#{$direction}-right-radius: $value;
    }
    @else {
        border-top-#{$direction}-radius: $value;
        border-bottom-#{$direction}-radius: $value;
    }
}

// 背景图
@mixin bg-img($size: cover) {
    background-repeat: no-repeat;
    background-position: center;
    background-size: $size;
}

@mixin margin-top ($value: 24px) {
  margin-top: $value
}

@mixin margin-bottom ($value: 24px) {
  margin-bottom: $value
}

// 提高优先级
@mixin priority {
  &#{&}#{&} {
      @content;
  }
}

// 页面内容的最大宽度
@mixin container($width: $container-width) {
  max-width: $width;
  min-width: $screen-xl;
  margin-left: auto;
  margin-right: auto;
  @media (max-width: $screen-xl) {
    max-width: 94%;
  }
}

@mixin border($side: both, $color: $border-color) {
  $border-style: 1px solid $color;
  @if $side == both {
    border: $border-style;
  }
  @else {
    border-#{$side}: $border-style;
  }
}

@mixin inline-form-wrapper() {
  background: #fff;
  padding: 10px 24px;
  margin-bottom: 20px;
  &::v-deep {
    .ant-form-item {
      margin: 10px 24px 10px 0;
    }
  }
}
